<template>
  <div class="page-header color-g" v-if="adTimeLeft>0">
    <p class="fb">
      <span class="color-red mr10">{{adCfg.title}}</span>
      <span>{{adCfg.desc}}</span>
    </p>
    <div>
      <span class="time-num">{{timeLeftDay}}</span>
      <span class="time-unit">天</span>
      <span class="time-num">{{timeLeftH}}</span>
      <span class="time-unit">时</span>
      <span class="time-num">{{timeLeftM}}</span>
      <span class="time-unit">分</span>
      <span class="time-num">{{timeLeftS}}</span>
      <span class="time-unit">秒</span>
      <span>后活动结束</span>
    </div>
  </div>
  <div class="page-header todo-header" v-else-if="appActivity.status==='not_join'">
    <p class="todo-header-left">
      <img src="@/assets/gift.png" alt="" srcset="">
      {{appActivity.title}}
    </p>
    <el-popover
      placement="bottom"
      popper-class="colour-skin"
      width="190"
      :visible-arrow="false"
      trigger="hover">
      <img class="app-pop_img"
        src="@/assets/app-qr.png"
        alt="">
      <p class="fs12">手机扫码下载移动端APP</p>
      <p class="fs12">多端待办同步</p>
      <label slot="reference" ref="vipcode" class="vip-code-btn">下载移动端</label>
    </el-popover>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getUserActivity, getBackEndConfig } from '@/api/common'
import { filterAdData } from '@/utils/judge'
export default {
  name: 'AD',
  data () {
    return {
      adCfg: {},
      appActivity: {
        id: null,
        title: '',
        status: ''
      },
      adTimeLeft: 0
    }
  },
  computed: {
    ...mapGetters(['appInfo', 'userInfo', 'hasLogin']),
    timeLeftDay () {
      return parseInt(this.adTimeLeft / 24 / 60 / 60)
    },
    timeLeftH () {
      return parseInt(this.adTimeLeft / 60 / 60 % 24)
    },
    timeLeftM () {
      return parseInt(this.adTimeLeft / 60 % 60)
    },
    timeLeftS () {
      return parseInt(this.adTimeLeft % 60)
    }
  },
  watch: {
    hasLogin () {
      this.setTime()
    },
    'userInfo.is_member' () {
      this.setTime()
    }
  },
  async created () {
    this.getAdConfig()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    // 广告位
    getAdConfig () {
      const params = {
        app_id: this.appInfo.appID,
        version: this.appInfo.version,
        union_id: this.appInfo.channel,
        keyname: 'grzxsyhd'
      }
      Promise.allSettled([getBackEndConfig(params), this.getAppBackEndConfig()]).then(res => {
        const res1 = res[0].value
        const res2 = res[1].value
        const item = res1?.data.params || {}
        const activityId = res2?.data.seckill_id
        this.appActivity.id = activityId
        this.adCfg = item
        this.setTime()
        if (activityId) {
          this.appActivity.title = res2.data.title
        }
      })
    },
    getAppBackEndConfig () {
      if (this.appInfo.appID !== '111') {
        return {
          data: {}
        }
      } else {
        const params1 = {
          app_id: 112,
          version: '1.0.0.0',
          keyname: 'cjsjl'
        }
        return getBackEndConfig(params1)
      }
    },
    getUserActivityInfo () {
      this.appActivity.status = ''
      if (!this.appActivity.id) return
      if (!this.userInfo.user_id) {
        this.appActivity.status = 'not_join'
        return
      }
      getUserActivity({ act_id: this.appActivity.id }).then(res => {
        this.appActivity.status = res.data.sub_code
      })
    },
    setTime () {
      clearInterval(this.timer)
      this.getUserActivityInfo()
      if (!this.adCfg.title || !filterAdData(this.adCfg)) {
        this.adTimeLeft = 0
        return
      }
      this.getLeftTime()
      this.timer = setInterval(this.getLeftTime, 1000)
    },
    getLeftTime () {
      const currentTime = new Date().getTime()
      const targetTime = new Date(this.adCfg.valid_date_end).getTime()
      const timeLeft = targetTime - currentTime
      this.adTimeLeft = timeLeft / 1000
      if (this.adTimeLeft <= 0) {
        clearInterval(this.timer)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$--color-red: #F15855 !default;
$--color-primary-g: #F8DE9D !default;
$--color-primary-bg: rgba($color: #fff, $alpha: 0.05);
$--color-primary-bg1: rgba($color: #fff, $alpha: 0.1);
.color-red{
  color: $--color-red;
}
.color-g{
  color: $--color-primary-g;
}
.page-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-top: 10px;
  padding: 0 20px;
  background-color: $--color-primary-bg;
  border-radius: 6px;
  font-size: 12px;
  color: $--color-primary-g;
}
.todo-header{
  background-color: rgba($--color-red, 0.1);
  border: 1px solid rgba($--color-red, 0.2);
}
.todo-header-left{
  display: flex;
  align-items: center;
  color: $--color-red;
  img{
    width: 24px;
    margin-right: 4px;
  }
}
.app-pop_img {
  width: 110px;
  height: 110px;
}
.time-num{
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: $--color-primary-bg1;
  border-radius: 4px;
  line-height: 20px;
  text-align: center;
  color: #FC5B42;
}
.time-unit{
  margin: 0 6px;
}
</style>
